<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
<title>商品购物车</title>
<link href="${ctxStatic }/site/themes/DianShangMuBan/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="${ctxStatic }/site/themes/DianShangMuBan/css/css.css" rel="stylesheet" type="text/css">
<script src="${ctxStatic }/site/themes/DianShangMuBan/js/jquery.min.js"></script>
<script src="${ctxStatic }/site/themes/DianShangMuBan/js/flat-ui.min.js"></script>
<script src="${ctxStatic }/site/themes/DianShangMuBan/js/application.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var h = $(document).height();
	$(".overlay").css({"height": h });	
	$(".action").click(function(){
		$(".overlay").css({'display':'block','opacity':'0.8'});
		$(".showbox").stop(true).animate({'margin-top':'500px','opacity':'1'},10);
		setTimeout(function(){
			$(".showbox").stop(true).animate({'margin-top':'400px','opacity':'0'},10);
			$(".overlay").css({'display':'none','opacity':'0'});
		},1000);
	});
});

function fnDisplay(pid){
	$('#fade'+pid).show();
	$('#light'+pid).show();
}
function fnCancel(pid){
	$('#fade'+pid).hide();
	$('#light'+pid).hide();
}

function fnDetermine(pid,uid,figure){
	$.get("${ctxMobileSite}/shopping/subtractShoppingCart?pid="+pid+"&uid="+uid, function(data){
		fnCancel(pid);
		
		//单个商品的总价
		var number = parseInt($("#number"+pid).html());
		var money = number * figure;
		
		//所有商品的数量
		var a = parseInt($("#quantum").html());
		//所有商品的总价
		var b = $("#prices").html();
		var c =  parseInt(b*100);
		
		var d = a-number;
		var f = (c-money)/100;
		
		$("#quantum").html(d);
		$("#prices").html(f);
		$("#"+pid).remove();
	});
}
</script>

</head>
<body >
<div class="gridContainer clearfix"> 
  <div id="LayoutDiv1" style="background-color:#f3f3f3;">
    <header class="bgred">
      <div class="fontfff">购物车 </div>
      <!-- <div style="float:right; width:20%"><span class="icon_edit"><font style="font-size:15px; color:#FFF">&nbsp;编辑</font></span></div> -->
    </header>
    <div class="bghui">
    <c:if test="${empty productsList }">
		    <dl class=" fenleilist3" style="text-align:center;"  >
		    		<span>  暂无商品  </span>
		    </dl>
    </c:if>
    <c:forEach items="${productsList }"  var="product"  >
    
	      <dl class=" fenleilist3" id="${product.id}">
	        <dt style="float:left;width:5%; padding-top:5% ">
	          <!-- <label class="checkbox" for="checkbox1">
	            <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
	          </label>   -->      
	        </dt>
	        <dt style="float:left; width:25%; "><img src="${ctxUser }/product/${product.indexPic}" style="width:70px;height:80px;" ></dt>
	        <dt style="float:left; width:36%; padding-left:5%;">
	          <p >${product.name }</p>
	          <p class="fRsmall"></p>
	          
	          <c:set var="key" value="${product.id }"/>
	          <c:forEach var="item" items="${map}">
					<c:if test="${item.key eq product.id  }">
				          <p class="font999">数量：<span id="number${product.id}">${item.value}</span>  </p>
					</c:if>
				</c:forEach>
	        </dt>
	        <dt style="float:left; width:5%;padding-left:5%;">￥${product.price/100 }</dt>
	        <dt style="float:left;width:18%;  padding-top:5% ">        
       			<div class="midd3"> 
       				<a href="#" onclick="fnDisplay(${product.id})">
                		<span class="anniu3 red">删除</span>
                	</a>
                </div>
       		</dt>
	      </dl>
	      
	      <!--弹出层-->
		<div id="fade${product.id}" class="black_overlay">
			<div id="light${product.id}" class="white_content">
			  <p style="background-color:#000; height:30px; padding-top:8px;" id="light_title">请问您是否要删除这1种产品？</p>
			  <div id="confirm" onclick="fnDetermine(${product.id},${uid },${product.price});"> <span class="anniu3 Orange">确定</span> </div>
			  <div id="cancel"> <span class="anniu3 Orange"  onclick="fnCancel(${product.id});">取消</span> </div>
			</div>
		</div>   
    </c:forEach>
    
    </div>
    <footer class="huifoot">
      <dl>
        <dt style="float:left; width:5%; padding-top:1%">  
        	<!-- <label class="checkbox" for="checkbox3">
            <input type="checkbox"  value="" id="checkbox3" data-toggle="checkbox" >
          </label> -->
        </dt>
        <dt style="float:left; width:50%; padding-left:10%;">
          <p class="fontRed" >总计：
          	<b>￥
          		<span id="prices">${tatolPrice/100 }</span>
	        </b>
          </p>
        </dt>
        <dt style="float:left; width:30%;">
        	<span onclick="window.location.href='${ctxFront }/site/shopping/createCartPay?uid=${uid}&wechatId=${wechatId}'"  class="anniu3 red">结算
	        	<c:if test="${tatol ne null }">
	        	（<span id="quantum">${tatol}</span>）
	        	</c:if>
        	</span>
        </dt>
      </dl>
    </footer>
  </div>
</div>
  <c:set var="choose" value="3"/>
 <%@ include file="/WEB-INF/views/modules/site/themes/DianShangMuBan/foot.jsp"%>
</body>
</html>

